<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 8;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Main Drawing ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Coordinates
        const d = 100;
        const y_mid = 180;
        const y_top = y_mid - d / 2;
        const y_bottom = y_mid + d / 2;
        const plate_thickness = 4;
        const x_left_contact = 170;
        const x_right_contact = 430;
        
        // --- Plates ---
        // Top plate
        ctx.beginPath();
        ctx.moveTo(80, y_top - plate_thickness);
        ctx.lineTo(520, y_top - plate_thickness);
        ctx.moveTo(80, y_top);
        ctx.lineTo(520, y_top);
        ctx.stroke();

        // Bottom plate
        ctx.beginPath();
        ctx.moveTo(80, y_bottom);
        ctx.lineTo(520, y_bottom);
        ctx.moveTo(80, y_bottom + plate_thickness);
        ctx.lineTo(520, y_bottom + plate_thickness);
        ctx.stroke();

        // Hatching for bottom plate
        ctx.save();
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (let i = 85; i < 520; i += 10) {
            ctx.moveTo(i, y_bottom + plate_thickness);
            ctx.lineTo(i - 10, y_bottom + plate_thickness + 10);
        }
        ctx.stroke();
        ctx.restore();

        // --- Liquid Blob ---
        const R = d / (2 * Math.cos(Math.PI / 4)); // Radius of curvature
        
        // Left meniscus (convex)
        const cx_left = x_left_contact + d / 2;
        ctx.beginPath();
        ctx.arc(cx_left, y_mid, R, Math.PI - Math.PI/4, Math.PI + Math.PI/4);

        // Right meniscus (concave)
        const cx_right = x_right_contact - d / 2;
        ctx.arc(cx_right, y_mid, R, Math.PI / 4, -Math.PI / 4, true);

        // Connecting lines
        ctx.lineTo(x_left_contact, y_top);
        ctx.closePath();
        
        // Draw the outline
        ctx.stroke();

        // Shading inside the liquid
        ctx.save();
        ctx.clip(); // Clip to the shape of the liquid
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = '#333';
        ctx.beginPath();
        for (let x = 100; x < 500; x += 15) {
            ctx.moveTo(x, y_top - 10);
            ctx.lineTo(x + 50, y_bottom + 10);
        }
        ctx.stroke();
        ctx.restore();

        // --- Annotations ---
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 24px Times New Roman';

        // Label 'd'
        ctx.beginPath();
        drawArrow(ctx, 100, y_top, 100, y_mid - 8);
        drawArrow(ctx, 100, y_bottom, 100, y_mid + 8);
        ctx.moveTo(100 - 5, y_top);
        ctx.lineTo(100 + 5, y_top);
        ctx.moveTo(100 - 5, y_bottom);
        ctx.lineTo(100 + 5, y_bottom);
        ctx.stroke();
        ctx.fillText('d', 110, y_mid + 8);

        // Label 'm'
        ctx.fillText('m', 150, y_top - 20);

        // Label 'A'
        ctx.fillText('A', 300, y_bottom - 20);
        
        // Left side annotations (R₂)
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(cx_left, y_mid);
        ctx.lineTo(x_left_contact, y_top);
        ctx.moveTo(cx_left, y_mid);
        ctx.lineTo(cx_left - R, y_mid);
        ctx.stroke();
        ctx.restore();
        ctx.fillText('R', 240, 175);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('2', 255, 180);
        ctx.font = 'italic 24px Times New Roman';

        // Right side annotations (θ)
        // Small circle for center of curvature
        ctx.beginPath();
        ctx.arc(cx_right, y_mid, 3.5, 0, 2 * Math.PI);
        ctx.fill();

        // Angle theta at top right
        ctx.beginPath();
        ctx.arc(x_right_contact, y_top, 25, Math.PI, Math.PI * 0.75, true); // 180 to 135 deg
        ctx.stroke();
        ctx.fillText('θ', x_right_contact - 45, y_top - 5);
        
        // Angle theta at bottom right
        ctx.beginPath();
        ctx.arc(x_right_contact, y_bottom, 25, Math.PI, Math.PI * 1.25); // 180 to 225 deg
        ctx.stroke();
        
        // Equation at the bottom
        ctx.font = '24px Times New Roman';
        ctx.fillText('θ', 250, 320);
        ctx.fillText('= 135°', 270, 320);
        
    </script>
</body>
</html>